<template>
  <div class="user-avatar">
    <img
      v-if="imageUrl"
      :src="imageUrl"
      :class="avatarClassList"
      :style="{width, height}"
    />
    <DefaultAvatar
      v-else class="text-white bg-gray-400 w-8 h-8"
      :class="avatarClassList"
      :style="{width, height}"
    />
  </div>
</template>

<script>
import DefaultAvatar from '../svg-icons/default-avatar.vue';

export default {
  name: 'UserAvatar',
  props: {
    imageUrl: {
      type: String,
      default: null,
    },
    circle: {
      type: Boolean,
      default: true,
    },
    classList: {
      type: Array,
      default: () => [],
    },
    /**
     * - normal 32px
     * - small 24px
     */
    size: {
      type: String,
      default: 'normal',
    },
    width: {
      type: String,
      default: null,
    },
    height: {
      type: String,
      default: null,
    },
  },
  components: { DefaultAvatar },
  computed: {
    isSmall() {
      return this.size === 'small';
    },
    avatarClassList() {
      return [
        this.isSmall ? 'w-6 h-6' : 'w-8 h-8',
        ...this.classList,
        this.circle ? 'rounded-full' : 'rounded',
      ];
    },
  },
}
</script>

<style></style>
